<template>

    <!-- 需求：购物车商品展示，移除商品，价格计算，购物车商品数量根据商品数量进行改变 -->

    <!-- 购物车商品显示 -->
    <section>
        <div v-if="isLogin" class="car-goodslist">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner unLogin">
                        <p>你还没登录，快去登录吧~</p>
                    </div>
                </div>
            </div>
        </div>

        <div v-else-if="$store.state.car.length == 0" class="car-goodslist">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner notGoodsInCar">
                        <p>购物车空空的，快去添加商品吧</p>
                    </div>
                </div>
            </div>
        </div>

        <div v-else class="car-goodslist">
            <div class="mui-card" v-for="item in $store.state.car" :key="item.id">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <input class="goodsinfo-selected" type="radio" :checked="item.selected"
                            @click="function(){item.selected = !item.selected;}">
                        <img class="goodsinfo-img" :src="item.imgUrl" alt="">
                        <div class="goodsinfo-name-control-box">
                            <p class="goodsinfo-name">
                                {{item.name}}
                            </p>
                            <p class="goodsinfo-control">
                                <span>￥{{item.singleCost}}</span>
                                <numbox :count="item.count" :id="item.id"></numbox>
                                <a class="goodsinfo-delete danger" @click.stop="removeGoodsInfoFromCar(item.id)">移除</a>
                            </p>
                            <div class="clear-both"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="$store.state.car.length > 0" class="settle-accounts">
            <div id="continue-shopping-but" class="continue-shopping-but">继续购物</div>
            <div id="go-settle-accounts-but" class="go-settle-accounts-but">
                <div>总计：￥{{ $store.getters.getTotalCost }}</div>
                <div>立即结算</div>
            </div>
        </div>

    </section>
</template>

<script>
    import numbox from '../subcomponents/shopcar_numbox.vue';
    import cookie from '../../util/cookie.js';
    export default {
        data() {
            return {
                isLogin: true
            }
        },
        created() {
            var token = cookie.getCookie('token');
            if (token != '' && token != null) {
                this.isLogin = false;
            } else {
                this.isLogin = true;
            }
        },
        methods: {
            removeGoodsInfoFromCar(id) {
                this.$store.commit('removeGoodsInfoFromCar', id);
            }
        },
        components: {
            numbox
        }
    }
</script>


<style lang="scss" scoped>
    section {
        margin-bottom: 60px;
        background: #eeeeee;
    }

    .unLogin p {
        font-size: 24px;
        text-align: center;
        margin: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #000000;
    }

    .notGoodsInCar p {
        font-size: 20px;
        text-align: center;
        margin: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #000000;
    }

    .mui-card-content-inner {
        padding: 7px;
    }

    .mui-card-content-inner .goodsinfo-selected,
    .mui-card-content-inner .goodsinfo-img,
    .mui-card-content-inner .goodsinfo-name-control-box

    /* .mui-card-content-inner .goodsinfo-delete  */
        {
        float: left;
    }

    .item {
        width: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: #eeeeee 2px solid;
    }

    .item:last-child {
        width: 100%;
        border-bottom: 0;
    }

    .goodsinfo-selected {

        margin-top: 23px;
        margin-left: 5px;
        width: 20px;
        height: 20px;

    }

    .goodsinfo-img {
        padding: 5px;
        width: 20%;
        /* border: 1px #ff0000 solid; */
        margin-right: 5px;
        margin-left: 5px;

    }

    .goodsinfo-name-control-box {
        width: 65%;
        height: 100%;
        float: left;
        margin-right: 5px;

        .goodsinfo-name {
            font-size: 18px;
            color: #000000;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-weight: bold;
            padding-top: 5px;
        }


        .goodsinfo-control {


            span {
                font-size: 17px;
                color: #f30606;
                font-weight: bold;
            }

            numbox {
                height: 20px;
            }
        }
    }

    .goodsinfo-delete {
        margin-top: 23px;
        font-size: 16px;
    }

    .clear-both::after {
        display: block;
        content: "";
        height: 0;
        width: 0;
        clear: both;
    }

    .settle-accounts {
        display: flex;
        background: #ff0000;
        width: 100%;
        height: 80px;
        position: fixed;
        bottom: 50px;
        left: 0;
        text-align: center;
        line-height: 80px;
        font-size: 20px;
        color: #ffffff;

        .continue-shopping-but {
            background: #0055f3;
            width: 35%;
        }

        .continue-shopping-but:active {
            background: #1a05d6;
        }

        .go-settle-accounts-but {
            background: #ff0000;
            width: 65%;
            padding: 10px;

            div {
                height: 30px;
                padding: 0;
                margin: 0;
                line-height: 30px;
                font-size: 20px;
                color: #ffffff;
            }
        }

        .go-settle-accounts-but:active {
            background: #cf0808;
        }
    }
</style>